<template>
  <div class="app-container">
    <el-table ref="multipleTable"  border :data="tableData">
      <el-table-column label="序号" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column property="userName" label="用户名" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column property="phoneNum" label="手机号" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column  label="用户类型" property="authTypeText" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="注册时间" property="name" align="center">
        <template slot-scope="scope">
          {{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" :page-sizes="limits" background layout="sizes, prev, pager, next, jumper, total" :total="count">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as api from '@/utils/api'
export default {
  data () {
    return {
      tableData: [],
      currentPage: 1,
      limit: 20,
      limits: [10, 20, 50, 100],
      count: 0
    }
  },
  computed: {
    id(){
      return this.$route.query.id
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      let res = await api.getLtsMessageUser({
        pageNum: this.currentPage,
        pageSize: this.limit,
        newsNoticeId: this.id
      })
      this.tableData = res.data.list
      this.count = res.data.total
    },
    handleSizeChange (val) {
      this.limit = val
      this.getData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
    }
  }
}
</script>
